<template>
  <div class="page">
    <GameView @activityEndFun="activityEndFun"/>
    <van-icon name="arrow-left" class="back" @click="goHome">返回</van-icon>

    <van-overlay v-model:show="data.bShowEnd">
      <div class="popResult">
        <img class="end-title" src="../assets/img/end_win.png">
        <div class="end-score">您的成绩为<span class="_span">{{ data.score }}</span>分</div>
        <div class="end-score">历史最高分<span class="_span">{{ store.state.maxScore }}</span>分</div>
        <!-- <div class="end-btn" @click="bShowEnd=false;bShowLottery=true">赶紧去抽奖</div> -->
        <div class="btns">
          <!-- <div @click="goHome">排行榜</div> -->
          <div @click="goHome">返回首页</div>
        </div>
      </div>
    </van-overlay >
    <van-overlay v-model:show="data.bShowLottery" @click="openLottery">
      <img class="popLottery" src="../assets/img/baoxiang.png"/>
    </van-overlay >
    <van-overlay :show="!!data.awardInfo">
      <div class="popAward" v-if="!!data.awardInfo">
        <img class="img" src="../assets/img/gift.png" alt="">
        <div class="title0">{{data.awardInfo.name}}</div>
        <div class="desc">兑换码：{{ data.awardInfo.authCode }}</div>
        <!-- <div class="btnInfo" @click="showAwardInfo">查看奖品详情</div> -->
        <div class="btnInfo" @click="goUser">查看奖品详情</div>
        <div class="btnHome" @click="goHome">返回首页</div>
      </div>
    </van-overlay >
    <van-overlay v-model:show="data.bNoward">
      <div class="popNoward"></div>
    </van-overlay >
    <van-overlay v-model:show="data.bShowAwardInfo" @click="data.bShowAwardInfo =false">
      <img class="popAwardInfo" src="../assets/img/award_info.jpg" alt="">
    </van-overlay >
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { useStore } from '../stores';
import request from '../comm/request';
import { showToast } from 'vant';
import GameView from '../components/GameView.vue';
import router from '../router';
const store = useStore();

const data = reactive({
  bShowEnd: false,
  score: 0,
  bShowLottery: false,
  awardInfo: null,
  bNoward: false,
  bShowAwardInfo: false,
  remainder: 0,
})
onMounted(()=>{
  // init
  data.remainder = 30*1000
})
function goHome(){
    router.replace('/')
  }
function goUser(){
  // router.replace('/user')
}
async function openLottery(){
  let res = await request.get('/act/go/63');
  if (res.code == 1) {
    showToast('抽奖成功')
    data.bShowLottery = false;
    data.awardInfo = res.data;
    //xj res.data里有奖品的数据，可能要用来显示哦
  } else {
    alert(res.msg)
    goHome();
  }
}
// 活动结束回调
async function activityEndFun (score:number){
  console.log('activityEndFun',score,store.state.maxScore);
  data.score = score
  // 上传分数
  if (score > store.state.maxScore) {
    let res = await request.post('/user/setScore?score='+score);
    if (res.code == 1) {
      store.state.maxScore = score;
    }
  }
  // data.info.status = 1
  data.bShowEnd = true;
}

</script>

<style lang="less" scoped>
.back{
  position: absolute;
  z-index: 10;
  left: 5px;
  top: 5px;
  padding: 5px;
}

.popResult{
  position: relative;
  width: 80vmin;
  height: 40vmin;
  background: white;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .end-title{
    margin-top: -30vmin;
    width: 70vmin;
    height: auto;
  }
  .end-score{
    font-size: 0.65rem;
    color: #f33061;
    ._span{
      font-size: 0.7rem;
      font-weight: bold;
      margin: 0 1vmin;
    }
  }
  .end-btn{
    background: rgb(243, 48, 97);
    color: rgb(254, 238, 163);
    width: 60vmin;
    height: 12vmin;
    border-radius: 6vmin;
    text-align: center;
    line-height: 12vmin;
  }
}
.btns{
  position: absolute;
  bottom: -14vmin;
  display: flex;
  >div{
    background:  rgb(229, 173, 100);
    width: 32vmin;
    height: 9vmin;
    border-radius: 5vmin;
    text-align: center;
    color: white;
    line-height: 10vmin;
    margin: 0 2vmin;
  }
}
.popLottery{
  width: 80vmin;
  height: auto;
}
.popAward{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .img{
    width: 80%;
    height: auto;
  }
  .title0{
    color: #ffdb12;
    font-size: 0.55rem;
  }
  .desc{
    color: #fff;
    font-size: 0.5rem;
    margin: 2vmin;
  }
  .btnInfo{
    background:  rgb(243, 48, 97);
    width: 32vmin;
    height: 9vmin;
    border-radius: 5vmin;
    text-align: center;
    color: white;
    line-height: 10vmin;
    margin: 2vmin;
  }
  .btnHome{
    background:  rgb(229, 173, 100);
    width: 32vmin;
    height: 9vmin;
    border-radius: 5vmin;
    text-align: center;
    color: white;
    line-height: 10vmin;
  }
}
.popAwardInfo{
  width: 100%;
  height: auto;
}
</style>